<template>
  <div>
    <title>新手指南</title>
    <div>
      <h1>欢迎来到校园循环利用宝新手指南！</h1>
    </div>
    <div class="navbar">
      <ul class="navbar-list">
        <li><a href="#overview">简介和概览</a></li>
        <li><a href="#getting-started">入门指南</a></li>
        <li><a href="#faq">常见问题解答</a></li>
        <li><a href="#tutorials">教程和指南</a></li>
        <li><a href="#examples">示例和案例</a></li>
        <li><a href="#resources">资源链接</a></li>
        <li><a href="#feedback-support">用户反馈和支持</a></li>
        <li><a href="#best-practices">最佳实践和建议</a></li>
        <li><a href="#social-interaction">教程和视频</a></li>
        <li><a href="#changelog">更新日志</a></li>
      </ul>
    </div>
    <div class="search-box">
      <input type="text" placeholder="搜索" />
    </div>
	<div class="image-container">
		<a href=""><img src="../../../image/购买.png" alt="购买"></a>
		<a href=""><img src="../../../image/查询.png" alt="查询"></a>
		<a href=""><img src="../../../image/质量技术.png" alt="质量技术"></a>
		<a href=""><img src="../../../image/下载.png" alt="下载"></a>
	</div>
	<div class="p1">
		<h3>1.介绍</h3>
		<p>欢迎来到校园循环利用宝新手指南！这里是为了帮助您快速了解并开始使用我们的服务。
		无论您是初学者还是有经验的用户，我们都将提供您所需的信息。</p>
	</div>
	<div class="p2">
		<h3>2.步骤</h3>
		<p>用户登录或者注册完成，他们可以开始浏览网站上的内容。可以开始查看物品、 发布物品、查看个人信息等。用户可以根据个人兴趣选择感兴趣的内容，并与之互动。</p>
	</div>
	<div class="p3">
		<h3>3. 常见问题解答（FAQ）</h3>
		<p>Q: 如果找不到具体功能的操作步骤怎么办?</p>
		<p>A: 可以去到上面的搜索框搜索您需要的内容或者去导航栏点击查看您需要的信息。</p>
	</div>
	<app-foot></app-foot>
  </div>
</template>
<script>
	import AppFoot from '../common/AppFoot.vue';
	export default {
	    components: {
	        AppFoot,
	    },
		}
</script>
<style>
  h1 {
    text-align: center;
    font-size: 30px;
  }

  .navbar {
    display: flex;
    justify-content: center;
    background-color: #f6f6f6; /* 更柔和的背景色 */
    padding: 10px 0; /* 添加上下内边距 */
  }

  .navbar-list {
    display: flex;
    list-style-type: none;
    padding: 0;
	flex-wrap: wrap;
  }
  .navbar-list li {
    margin: 0 15px; /* 调整导航链接之间的间距 */
  }

  .navbar-list li a {
    text-decoration: none; /* 去除链接下划线 */
    color: #333; /* 导航栏文字颜色 */
    padding: 8px 12px; /* 添加内边距 */
    border-radius: 5px; /* 添加圆角 */
    background-color: #f6f6f6; /* 更柔和的背景色 */
    transition: background-color 0.3s ease; /* 添加过渡效果 */
    position: relative; /* 设置相对定位 */
  }
  .navbar-list li a:hover::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -3px; /* 调整下划线位置 */
    height: 1px;
    background-color: #333; /* 下划线颜色 */
  }

  .search-box {
    text-align: center;
    margin-top: 10px; /* 调整搜索框与导航栏之间的间距 */
  }

  .search-box input[type="text"] {
    width: 1000px; /* 设置搜索框宽度 */
    padding: 10px; /* 添加内边距 */
    border-radius: 20px; /* 设置圆角 */
    border: none; /* 去除边框 */
    outline: none; /* 去除默认外观 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
	margin-top: 20px;
  }
  
  .image-container {
    display: flex;
    justify-content: space-between; /* 设置图片之间的间距 */
    margin-top: 20px;
  }
  
  .image-container a {
    flex: 1; /* 设置图片自动占据剩余空间 */
    margin: 0 10px; /* 设置图片之间的间距 */
    text-align: center; /* 水平居中 */
  }
  
  .image-container img {
    width: 80px;
    height: 80px;
	padding-top: 20px;
  }
  .p1{
	  width: auto;
	  height: auto;
	  margin-left: 50px;
  }
  .p2{
  	  width: auto;
  	  height: auto;
  	  margin-left: 50px;
  }
  .p3{
  	  width: auto;
  	  height: auto;
  	  margin-left: 50px;
  }
</style>
